<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <dl>
      <dt>
        <input type="checkbox" id="checkAll" /><label>全选</label
        ><a href="javascript:;">反选</a>
      </dt>
      <dd>
        <p><input type="checkbox" name="item" /><label>选项1</label></p>
        <p><input type="checkbox" name="item" /><label>选项2</label></p>
        <p><input type="checkbox" name="item" /><label>选项3</label></p>
        <p><input type="checkbox" name="item" /><label>选项4</label></p>
        <p><input type="checkbox" name="item" /><label>选项5</label></p>
        <p><input type="checkbox" name="item" /><label>选项6</label></p>
        <p><input type="checkbox" name="item" /><label>选项7</label></p>
        <p><input type="checkbox" name="item" /><label>选项8</label></p>
        <p><input type="checkbox" name="item" /><label>选项9</label></p>
        <p><input type="checkbox" name="item" /><label>选项10</label></p>
      </dd>
    </dl>
    <h5>1、切换全选/全不选文字  2、根据选中个数更新全选框状态 </h5>
  </body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-family: Tahoma;
      font-size: 12px;
    }
    label,
    input,
    a {
      vertical-align: middle;
    }
    label {
      padding: 0 10px 0 5px;
    }
    a {
      color: #09f;
      text-decoration: none;
    }

    a:hover {
      color: red;
    }
    dl {
      width: 120px;
      margin: 10px auto;
      padding: 10px 5px;
      border: 1px solid #666;
      background: #fafafa;
    }
    dt {
      padding-bottom: 10px;
      border-bottom: 1px solid #666;
    }
    dt label {
      font-weight: 700;
    }
    p {
      margin-top: 10px;
    }
    h5{
        margin-left: 200px;
    }
  </style>
  <script>
    var oA = document.getElementsByTagName("a")[0];
    var oInput = document.getElementsByTagName("input");
    var oLabel = document.getElementsByTagName("label")[0];
    var isCheckAll = function () {
      for (var i = 1, n = 0; i < oInput.length; i++) {
        oInput[i].checked && n++;
        console.log(n);
      }
      console.log(n);
      oInput[0].checked = n == oInput.length - 1;
      oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选";
    };
    oInput[0].onclick = function () {
      for (var i = 1; i < oInput.length; i++) {
        oInput[i].checked = this.checked;
      }
      isCheckAll();
    };
    oA.onclick = function () {
      for (var i = 1; i < oInput.length; i++) {
        oInput[i].checked = !oInput[i].checked;
      }
      isCheckAll();
    };
    for (var i = 1; i < oInput.length; i++) {
      oInput[i].onclick = function () {
        isCheckAll();
      };
    }
  </script>
</html>
